<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="关键字" prop="keyWords">
        <el-input v-model="queryParams.keywords" placeholder="请输入关键字" clearable size="small"
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="所属栏目" style="width: 380px" prop="cateId">
        <treeselect style="width: 300px"
                    :multiple="true"
                    :clearable="true"
                    :searchable="true"
                    v-model="queryParams.cateId"
                    :options="menuOptions"
                    :normalizer="normalizer"
                    :show-count="true"
                    placeholder="选择所属栏目"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate">新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除
        </el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="文章编号" prop="id" width="120" align="center"/>
      <el-table-column label="文章标题" prop="newsTitle" :show-overflow-tooltip="true"/>
      <el-table-column label="所属栏目" prop="cateList" width="160">
        <template slot-scope="scope">
          <span>{{ showNewsCate(scope.row.cateList) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="作者" prop="userNickName" align="center" width="100"/>
      <el-table-column label="缩略图" align="center" width="100">
        <template slot-scope="scope">
          <el-image v-if="scope.row.thumbnail !== ''" style="width: 60px;height: 50px"
                    :src="apiUrl+'/'+scope.row.thumbnail" fit="fill"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="发布日期" align="center" prop="publishedTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改日期" align="center" prop="updateTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList"></pagination>
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="所属栏目" prop="cateIds">
              <treeselect
                :multiple="true"
                :clearable="true"
                :searchable="true"
                :disable-branch-nodes="true"
                :flat="true"
                v-model="form.cateIds"
                :options="menuOptions"
                :normalizer="normalizer"
                :show-count="true"
                placeholder="选择所属栏目"
                @input="loadModel"
              ></treeselect>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="文章标题" prop="title">
              <el-input v-model="form.title" placeholder="请输入文章标题"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="关键词" prop="keywords">
              <el-input v-model="form.keywords" placeholder="请输入文章关键词"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="文章来源" prop="source">
              <el-input v-model="form.source" placeholder="请输入文章来源"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="摘要" prop="excerpt">
              <el-input v-model="form.excerpt" placeholder="请输入文章摘要" :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="文章类型" prop="isJump">
              <el-radio-group v-model="form.excerpt">
                <el-radio v-for="dict in typeOptions.values" :key="dict.key" :label="dict.key" @change="typeChange">{{dict.value}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="缩略图" prop="description">
              <el-upload v-model="upLoading"
                         class="avatar-uploader"
                         :action="apiUrl + '/system/upload/upImg'"
                         :show-file-list="false"
                         name="file"
                         :data="setUpData()"
                         :on-successs="handleAvatarSuccess"
                         :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="状态">
              <el-radio-group v-model="form.status">
                <el-radio v-for="dict in statusOptions.values" :key="dict.key" :label="dict.key" @change="typeChange">{{dict.value}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="属性标记" prop="isJump">
              <el-checkbox-group v-model="form.attr">
                <el-checkbox v-for="dict in attrOptions.values" :key="dict.key" :label="dict.key" @change="typeChange">{{dict.value}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="发布日期">
              <el-date-picker v-model="form.publishedTime" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="cancelForm">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {listNews} from '../../../../../api/system/cms/news'
export default {
  name: 'index',
  components: {Treeselect},
  data () {
    return {
      // 总条数
      total: 0,
      // 图片上传地址
      imageUrl: '',
      // 上传加载
      upLoading: false,
      // 是否跳转
      isJump: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 文章列表数据
      list: [],
      // 菜单树选项
      menuOptions: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 状态数据字典
      statusOptions: [],
      // 附加状态数据字典
      attrOptions: [],
      // 文章类型字典
      typeOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keywords: '',
        cateId: []
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        cateIds: [
          {
            type: 'array',
            required: true,
            message: '请选择所属栏目',
            trigger: 'change'
          }
        ],
        title: [
          {
            required: true,
            message: '文章标题不能为空',
            trigger: 'blur'
          }
        ]
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      createFormRules: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 查询菜单列表
    getList () {
      this.loading = true
      listNews(this.queryParams).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.statusOptions = response.data.statusOptions
        this.typeOptions = response.data.typeOptions
        this.menuOptions = []
        this.menuOptions = this.handleTree(response.data.menus, 'id', 'parentId')
        this.loading = false
      })
    },
    handleQuery () {
      console.log()
    },
    normalizer () {
      console.log()
    },
    loadModel () {
      console.log()
    },
    typeChange () {
      console.log()
    },
    setUpData () {
      console.log()
    },
    handleAvatarSuccess () {
      console.log()
    },
    beforeAvatarUpload () {
      console.log()
    },
    pickOptions () {
      console.log()
    },
    submitForm () {
      console.log()
    },
    cancelForm () {
      console.log()
    }
  }
}
</script>

<style scoped>

</style>
